<style type="text/css">
.line {
  height: 25px;
  line-height: 25px;
  margin: 3px;
}
.imp{
    padding-left: 25px;
}
.expression input.textInput{
    width:60px;
}
</style>
<div class="pageContent expression">
    <div class="panelBar">
        <ul class="toolBar">
            <li style="margin-top: 8px;"><h1 style="text-align:left;"><@label key='timejob_cronExpression.C'>周期表达式</@label></h1></li>
        </ul>
    </div>
    <table class="table border" width="100%">
        <thead>
            <tr>
                <th width="100">描述</th>
                <th width="50"><@label key='second.C'>秒</@label></th>
                <th width="50"><@label key='minute.C'>分钟</@label></th>
                <th width="50"><@label key='hour.C'>小时</@label></th>
                <th width="50"><@label key='day.C'>日</@label></th>
                <th width="50"><@label key='month.C'>月</@label></th>
                <th width="50"><@label key='week.C'>周</@label></th>
                <th width="50"><@label key='year.C'>年</@label></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><@label key='expressionfield.C,colon'>表达式字段：</@label></td>
                <td><input type="text" name="v_second" class="textInput"
                    value="*" readonly="readonly"></td>
                <td><input type="text" name="v_min" class="textInput" value="*"
                    readonly="readonly"></td>
                <td><input type="text" name="v_hour" class="textInput"
                    value="*" readonly="readonly"></td>
                <td><input type="text" name="v_day" class="textInput" value="*"
                    readonly="readonly"></td>
                <td><input type="text" name="v_month" class="textInput"
                    value="*" readonly="readonly"></td>
                <td><input type="text" name="v_week" class="textInput"
                    value="?" readonly="readonly"></td>
                <td><input type="text" name="v_year" class="textInput"
                    readonly="readonly"></td>
            </tr>
            <tr>
                <td><@label
                    key='timejob_cronExpression.C,colon'>周期表达式：</@label></td>
                <td colspan="6"><input type="text" name="cron"
                    style="width: 100%;"
                    value="<#if cronExpression??>${cronExpression!''}<#else>* * * * * ?</#if>"
                    id="cron"></td>
                <td><div class="buttonActive">
                        <div class="buttonContent" onclick="btnFan();">
                            <button type="button"><@label
                                key='analyze.B'>解析</@label></button>
                        </div>
                    </div></td>
            </tr>
        </tbody>
    </table>
    <div class="tabs" id="cronExpressionTabs" currentIndex="0" eventType="click" style="width: 100%;">
        <div class="tabsHeader">
            <div class="tabsHeaderContent">
                <ul>
                    <li><a href="javascript:;"><span><@label key='seconde.C'>秒</@label></span> </a></li>
                    <li><a href="javascript:;"><span><@label key='minute.C'>分钟</span></@label></a></li>
                    <li><a href="javascript:;"><span><@label key='hour.C'>小时</@label></span> </a></li>
                    <li><a href="javascript:;"><span><@label key='day.C'>日</@label></span> </a></li>
                    <li><a href="javascript:;"><span><@label key='month.C'>月</@label></span> </a></li>
                    <li><a href="javascript:;"><span><@label key='week.C'>周</@label></span> </a></li>
                    <li><a href="javascript:;"><span><@label key='year.C'>年</@label></span> </a></li>
                </ul>
            </div>
        </div>
        <div class="tabsContent">
            <div style="height: 300px;background-color: #ffffff;" >
                 <div class="line">
                     <input type="radio" checked="checked" name="second" onclick="everyTime(this)"><@label key='every.C,second.C'>每秒</@label> 
                 </div>
                 <div class="line">
                     <input type="radio" name="second" onclick="cycle(this)"><@label key='begin.C,colon'>开始：</@label>
                     <input class="numberspinner" style="width: 60px;" min="1" max="58" value="1" id="secondStart_0">
                        <@label key='end.C,colon'>结束：</@label>
                     <input class="numberspinner" style="width: 60px;" min="2" max="59" value="2" id="secondEnd_0">
                 </div>
                 <div class="line">
                     <input type="radio" name="second" onclick="startOn(this)"><@label key='begin.C,colon'>开始：</@label>
                    <input class="numberspinner" style="width: 60px;" min="0" max="59" value="0" id="secondStart_1">
                        <@label key='interval.C,colon'>间隔：</@label>
                    <input class="numberspinner" style="width: 60px;" min="1" max="59" value="1" id="secondEnd_1">
                 </div>
                 <div class="line">
                    <input type="radio" name="second" id="second_appoint"><@label key='specify.C'>指定</@label>
                    <#list [0,1,2,3,4,5] as first>
                        <div class="imp secondList">
                        <#list [0,1,2,3,4,5,6,7,8,9] as two>
                             <input type="checkbox" value="<#if first==0>${two}<#else>${first}${two}</#if>" />${first}${two}
                        </#list>
                        </div>
                    </#list>
                 </div>
            </div>
            <div style="height: 300px;background-color: #ffffff;" >
                 <div class="line">
                     <input type="radio" checked="checked" name="min" onclick="everyTime(this)"><@label key='every.C,minute.C'>每分钟</@label> 
                 </div>
                 <div class="line">
                     <input type="radio" name="min" onclick="cycle(this)"><@label key='begin.C,colon'>开始：</@label>
                     <input class="numberspinner" style="width: 60px;" min="1" max="58" value="1" id="minStart_0">
                        <@label key='end.C,colon'>结束：</@label>
                     <input class="numberspinner" style="width: 60px;" min="2" max="59" value="2" id="minEnd_0">
                 </div>
                 <div class="line">
                     <input type="radio" name="min" onclick="startOn(this)"><@label key='begin.C,colon'>开始：</@label>
                    <input class="numberspinner" style="width: 60px;" min="0" max="59" value="0" id="minStart_1">
                          <@label key='interval.C,colon'>间隔：</@label>
                    <input class="numberspinner" style="width: 60px;" min="1" max="59" value="1" id="minEnd_1">
                 </div>
                 <div class="line">
                    <input type="radio" name="min" id="min_appoint"><@label key='specify.C'>指定</@label>
                    <#list [0,1,2,3,4,5] as first>
                        <div class="imp minList">
                        <#list [0,1,2,3,4,5,6,7,8,9] as two>
                             <input type="checkbox" value="<#if first==0>${two}<#else>${first}${two}</#if>" />${first}${two}
                        </#list>
                        </div>
                    </#list>
                 </div>
            </div>
            <div style="height: 300px;background-color: #ffffff;" >
                 <div class="line">
                     <input type="radio" checked="checked" name="hour" onclick="everyTime(this)"><@label key='every.C,hour.C'>每小时</@label> 
                 </div>
                 <div class="line">
                     <input type="radio" name="hour" onclick="cycle(this)"><@label key='begin.C,colon'>开始：</@label>
                     <input class="numberspinner" style="width: 60px;" min="0" max="23" value="0" id="hourStart_0">
                         <@label key='end.C,colon'>结束：</@label>
                     <input class="numberspinner" style="width: 60px;" min="1" max="23" value="2" id="hourEnd_0">
                 </div>
                 <div class="line">
                     <input type="radio" name="hour" onclick="startOn(this)"><@label key='begin.C,colon'>开始：</@label>
                    <input class="numberspinner" style="width: 60px;" min="0" max="23" value="0" id="hourStart_1">
                        <@label key='interval.C,colon'>间隔：</@label>
                    <input class="numberspinner" style="width: 60px;" min="0" max="1" value="23" id="hourEnd_1">
                 </div>
                 <div class="line">
                    <input type="radio" name="hour" id="hour_appoint"><@label key='specify.C'>指定</@label>
                    <#list [0,1] as first>
                        <div class="imp hourList">
                        <#list [0,1,2,3,4,5,6,7,8,9] as two>
                             <input type="checkbox" value="<#if first==0>${two}<#else>${first}${two}</#if>" />${first}${two}
                        </#list>
                        </div>
                    </#list>
                    <div class="imp hourList">
                        <input type="checkbox" value="20" />20
                        <input type="checkbox" value="21" />21
                        <input type="checkbox" value="22" />22
                        <input type="checkbox" value="23" />23
                    </div>
                 </div>
            </div>
            <div style="height: 300px;background-color: #ffffff;" >
                <div class="line">
                     <input type="radio" checked="checked" name="day" onclick="everyTime(this)"><@label key='every.C,day.C'>每日</@label>
                </div>
                <div class="line">
                    <input type="radio" name="day" onclick="unAppoint(this)"><@label key='notspecified.C'>不<@label key='specify.C'>指定</@label></@label>
                </div>
                <div class="line">
                     <input type="radio" name="day" onclick="cycle(this)"><@label key='begin.C,colon'>开始：</@label>
                     <input class="numberspinner" style="width: 60px;" min="1" max="31" value="1" id="dayStart_0">
                         <@label key='end.C,colon'>结束：</@label>
                     <input class="numberspinner" style="width: 60px;" min="2" max="31" value="2" id="dayEnd_0">
                </div>
                <div class="line">
                     <input type="radio" name="day" onclick="startOn(this)"><@label key='begin.C,colon'>开始：</@label>
                    <input class="numberspinner" style="width: 60px;" min="1" max="31" value="1" id="dayStart_1">
                        <@label key='interval.C,colon'>间隔：</@label>
                    <input class="numberspinner" style="width: 60px;" min="1" max="31" value="1" id="dayEnd_1">
                </div>
                <!-- <div class="line">
                    <input type="radio" name="day" onclick="workDay(this)">每月
                    <input class="numberspinner" style="width: 60px;" min="1" max="31" value="1" id="dayStart_2">号最近的那个工作日
                </div>
                <div class="line">
                    <input type="radio" name="day" onclick="lastDay(this)">本月最后一天
                </div> -->
                <div class="line">
                    <input type="radio" name="day" id="day_appoint"><@label key='specify.C'>指定</@label>
                    <#list [0,1,2] as first>
                        <div class="imp dayList">
                        <#list [0,1,2,3,4,5,6,7,8,9] as two>
                            <#if first!=0 || two!=0>
                                <input type="checkbox" value="<#if first==0>${two}<#else>${first}${two}</#if>" />
                                <#if first==0>&nbsp;&nbsp;${two}<#else>${first}${two}</#if>
                            </#if>
                        </#list>
                        </div>
                    </#list>
                    <div class="imp dayList">
                        <input type="checkbox" value="30" />30
                        <input type="checkbox" value="31" />31
                    </div>
                </div>
            </div>
            <div style="height: 300px;background-color: #ffffff;" >
                 <div class="line">
                     <input type="radio" checked="checked" name="month" onclick="everyTime(this)"><@label key='every.C,month.C'>每月</@label>
                 </div>
                 <div class="line">
                    <input type="radio" name="month" onclick="unAppoint(this)"><@label key='notspecified.C'>不<@label key='specify.C'>指定</@label></@label>
                 </div>
                 <div class="line">
                     <input type="radio" name="month" onclick="cycle(this)"><@label key='begin.C,colon'>开始：</@label>
                     <input class="numberspinner" style="width: 60px;" min="1" max="12" value="1" id="monthStart_0">
                            <@label key='end.C,colon'>结束：</@label>
                     <input class="numberspinner" style="width: 60px;" min="2" max="12" value="2" id="monthEnd_0">
                 </div>
                 <div class="line">
                     <input type="radio" name="month" onclick="startOn(this)"><@label key='begin.C,colon'>开始：</@label>
                    <input class="numberspinner" style="width: 60px;" min="1" max="12" value="1" id="monthStart_1">
                            <@label key='interval.C,colon'>间隔：</@label>
                       <input class="numberspinner" style="width: 60px;" min="1" max="12" value="1" id="monthEnd_1">
                 </div>
                 <div class="line">
                    <input type="radio" name="month" id="month_appoint"><@label key='specify.C'>指定</@label>
                    <div class="imp monthList"> 
                    <#list [1,2,3,4,5,6,7,8,9,10,11,12] as month>
                        <input type="checkbox" value="${month}" />${month}
                    </#list>
                    </div>
                 </div>
            </div>
            <div style="height: 300px;background-color: #ffffff;" >
                 <div class="line">
                     <input type="radio" checked="checked" name="week" onclick="everyTime(this)"><@label key='every.C,week.C'>每周</@label>
                 </div>
                 <div class="line">
                    <input type="radio" name="week" onclick="unAppoint(this)"><@label key='notspecified.C'>不<@label key='specify.C'>指定</@label></@label>
                 </div>
                 <div class="line">
                     <input type="radio" name="week" onclick="cycle(this)"><@label key='begin.C,colon'>开始：</@label>
                     <input class="numberspinner" style="width: 60px;" min="1" max="7" value="1" id="weekStart_0">
                         <@label key='end.C,colon'>结束：</@label>
                     <input class="numberspinner" style="width: 60px;" min="2" max="7" value="2" id="weekEnd_0">
                 </div>
                 <div class="line">
                     <input type="radio" name="week" onclick="startOn(this)"><@label key='oneweek.C,colon'>第几周：</@label>
                    <input class="numberspinner" style="width: 60px;" min="1" max="7" value="1" id="weekStart_1">
                        <@label key='oneday.C,colon'>星期几：</@label>
                    <input class="numberspinner" style="width: 60px;" min="1" max="7" value="1" id="weekEnd_1">
                 </div>
                 <div class="line">
                    <input type="radio" name="week" id="week_appoint"><@label key='specify.C'>指定</@label>
                    <div class="imp weekList">
                    <#list [1,2,3,4,5,6,7] as week>                
                        <input type="checkbox" value="${week}" />${week}
                    </#list>
                    </div>
                 </div>
            </div>
            <div style="height: 300px;background-color: #ffffff;" >
                <div class="line">
                    <input type="radio" checked="checked" name="year" onclick="unAppoint(this)"><@label key='notspecified.C'>不<@label key='specify.C'>指定</@label></@label>
                </div>
                <div class="line">
                    <input type="radio" name="year" onclick="everyTime(this)"><@label key='every.C,year.C'>每年</@label>
                </div>
                <div class="line">
                    <input type="radio" name="year" onclick="cycle(this)"><@label key='begin.C,colon'>开始：</@label>
                    <input class="numberspinner" style="width: 90px;" min="2015" max="3000" id="yearStart_0" value="2015">
                        <@label key='end.C,colon'>结束：</@label>
                    <input class="numberspinner" style="width: 90px;" min="2016" max="3000" id="yearEnd_0" value="2016"></div>
            </div>
        </div>
        <div class="tabsFooter">
            <div class="tabsFooterContent">
                
            </div>
        </div>
        
    </div>
    <div class="formBar">
        <ul>
            <li><div class="buttonActive">
                    <div class="buttonContent" onclick="grantToCronValue();">
                        <button type="button"><@label key="save.B">保存</@label></button>
                    </div>
                </div></li>
            <li>
                <div class="buttonActiveGrey">
                    <div class="buttonContent">
                        <button type="button" class="close"><@label
                            key="cancel.B">取消</@label></button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
var jobExpressionDialog =  $.pdialog.getCurrent();
function btnFan() {
    //获取参数中表达式的值
    var txt = $("#cron").val();
    if (txt) {
        var regs = txt.split(' ');
        $("input[name=v_second]").val(regs[0]);
        $("input[name=v_min]").val(regs[1]);
        $("input[name=v_hour]").val(regs[2]);
        $("input[name=v_day]").val(regs[3]);
        $("input[name=v_month]").val(regs[4]);
        $("input[name=v_week]").val(regs[5]);

        initObj(regs[0], "second");
        initObj(regs[1], "min");
        initObj(regs[2], "hour");
        initDay(regs[3]);
        initMonth(regs[4]);
        initWeek(regs[5]);

        if (regs.length > 6) {
            $("input[name=v_year]").val(regs[6]);
            initYear(regs[6]);
        }
    }
}
function initObj(strVal, strid) {
    var ary = null;
    var objRadio = $("input[name='" + strid + "'");
    if (strVal == "*") {
        objRadio.eq(0).attr("checked", "checked");
    } else if (strVal.split('-').length > 1) {
        ary = strVal.split('-');
        objRadio.eq(1).attr("checked", "checked");
        $("#" + strid + "Start_0").val(ary[0]);
        $("#" + strid + "End_0").val(ary[1]);
    } else if (strVal.split('/').length > 1) {
        ary = strVal.split('/');
        objRadio.eq(2).attr("checked", "checked");
        $("#" + strid + "Start_1").val(ary[0]);
        $("#" + strid + "End_1").val(ary[1]);
    } else {
        objRadio.eq(3).attr("checked", "checked");
        if (strVal != "?") {
            ary = strVal.split(",");
            for (var i = 0; i < ary.length; i++) {
                $("." + strid + "List input[value='" + ary[i] + "']").attr("checked", "checked");
            }
        }
    }
}

function initDay(strVal) {
    var ary = null;
    var objRadio = $("input[name='day'");
    if (strVal == "*") {
        objRadio.eq(0).attr("checked", "checked");
    } else if (strVal == "?") {
        objRadio.eq(1).attr("checked", "checked");
    } else if (strVal.split('-').length > 1) {
        ary = strVal.split('-');
        objRadio.eq(2).attr("checked", "checked");
        $("#dayStart_0").val(ary[0]);
        $("#dayEnd_0").val(ary[1]);
    } else if (strVal.split('/').length > 1) {
        ary = strVal.split('/');
        objRadio.eq(3).attr("checked", "checked");
        $("#dayStart_1").val(ary[0]);
        $("#dayEnd_1").val(ary[1]);
    } else if (strVal.split('W').length > 1) {
        ary = strVal.split('W');
        objRadio.eq(4).attr("checked", "checked");
        $("#dayStart_2").val(ary[0]);
    } else if (strVal == "L") {
        objRadio.eq(5).attr("checked", "checked");
    } else {
        objRadio.eq(6).attr("checked", "checked");
        ary = strVal.split(",");
        for (var i = 0; i < ary.length; i++) {
            $(".dayList input[value='" + ary[i] + "']").attr("checked", "checked");
        }
    }
}

function initMonth(strVal) {
    var ary = null;
    var objRadio = $("input[name='month'");
    if (strVal == "*") {
        objRadio.eq(0).attr("checked", "checked");
    } else if (strVal == "?") {
        objRadio.eq(1).attr("checked", "checked");
    } else if (strVal.split('-').length > 1) {
        ary = strVal.split('-');
        objRadio.eq(2).attr("checked", "checked");
        $("#monthStart_0").val(ary[0]);
        $("#monthEnd_0").val(ary[1]);
    } else if (strVal.split('/').length > 1) {
        ary = strVal.split('/');
        objRadio.eq(3).attr("checked", "checked");
        $("#monthStart_1").val(ary[0]);
        $("#monthEnd_1").val(ary[1]);

    } else {
        objRadio.eq(4).attr("checked", "checked");
        ary = strVal.split(",");
        for (var i = 0; i < ary.length; i++) {
            $(".monthList input[value='" + ary[i] + "']").attr("checked", "checked");
        }
    }
}

function initWeek(strVal) {
    var ary = null;
    var objRadio = $("input[name='week'");
    if (strVal == "*") {
        objRadio.eq(0).attr("checked", "checked");
    } else if (strVal == "?") {
        objRadio.eq(1).attr("checked", "checked");
    } else if (strVal.split('/').length > 1) {
        ary = strVal.split('/');
        objRadio.eq(2).attr("checked", "checked");
        $("#weekStart_0").val(ary[0]);
        $("#weekEnd_0").val(ary[1]);
    } else if (strVal.split('#').length > 1) {
        ary = strVal.split('#');
        objRadio.eq(3).attr("checked", "checked");
        $("#weekStart_1").val(ary[0]);
        $("#weekEnd_1").val(ary[1]);
    } /* else if (strVal.split('L').length > 1) {
        ary = strVal.split('L');
        objRadio.eq(4).attr("checked", "checked");
        $("#weekStart_2").val(ary[0]);
    } */else{
        objRadio.eq(5).attr("checked", "checked");
        ary = strVal.split(",");
        for (var i = 0; i < ary.length; i++) {
            $(".weekList input[value='" + ary[i] + "']").attr("checked", "checked");
        }
    }
}

function initYear(strVal) {
    var ary = null;
    var objRadio = $("input[name='year'");
    if (strVal == "*") {
        objRadio.eq(1).attr("checked", "checked");
    } else if (strVal.split('-').length > 1) {
        ary = strVal.split('-');
        objRadio.eq(2).attr("checked", "checked");
        $("#yearStart_0").val(ary[0]);
        $("#yearEnd_0").val(ary[1]);
    }
}

function grantToCronValue(){
    var _value = $("input#cron", jobExpressionDialog).val();
    if(_value)
        $("input[name='cronExpression']").val(_value);
    $.pdialog.close(jobExpressionDialog);
}
</script>
<script src="${rc.getContextPath()}/manage/js/dwzCustomJs/dwz.custom.cron.js" type="text/javascript"></script>